import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import $ from 'jquery'
import { useRecoilState } from 'recoil'
import { TopicWaterfallMock } from './mock'
import { TopicService } from '../../../transfer/service/TopicService'
import TopicCard from '../../Card/TopicCard'

interface ITopicWaterfallProps {
    type: string
}

export default function TopicWaterfall(props: ITopicWaterfallProps) {
    const [topicWaterfall, setTopicWaterfall] = useRecoilState(TopicWaterfallMock)
    const [itemWidth, setItemWidth] = useState<any>()
    const [width, setWidth] = useState<any>()

    // 初始化所有专题信息
    useEffect(() => {
        let temp: any = []
        new TopicService().getAllTopic().then(res => {
            setTopicWaterfall(res.data.data)
        })
    }, [])

    // 初始化布局
    useEffect(() => {
        const container = $(`.${style.container}`)
        container.outerWidth(true)! > 1050 ? setWidth('70%') : setWidth('100%')
        setItemWidth((container.width()! - 50) / 3 + 'px')
    }, [$(`.${style.container}`).outerWidth(true)!])

    return (
        <div
            className={style.container}
            style={{
                ['--width-' as any]: width
            }}>
            {topicWaterfall.map((item, index) => {
                return (
                    <div key={index}>
                        <TopicCard data={item} cardWidth={itemWidth} />
                    </div>
                )
            })}
        </div>
    )
}
